<script setup lang="ts">
import { reactive, ref } from 'vue'

// ref<提供的数据类型>()

// 1. 简单类型 可以直接省略
const money = ref(100)

// 2. 复杂数据
type ListType = {
  id: number
  name: string
  done: boolean
}[]
const list = ref<ListType>([])

setTimeout(() => {
  list.value = [
    { id: 1, name: '吃饭', done: false },
    { id: 2, name: '睡觉', done: true },
    { id: 3, name: '敲代码', done: false },
  ]
}, 2000)

// ----------------------------------------
// 提供数据 reactive 提供复杂类型的数据 这个数据有明确的属性

const obj = reactive<{
  name: string
  age: number
}>({
  name: '张三',
  age: 18,
})
</script>

<template>
  <div>app组件-- {{ money }}</div>
  <ul>
    <li v-for="item in list" :key="item.id">
      <input type="checkbox" :checked="item.done" />
      {{ item.name }}
    </li>
  </ul>
</template>

<style>
ul {
  /* padding: 0;
  margin: 0; */
  list-style: node;
}
</style>
